<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
<link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen" />
<link rel="StyleSheet" href="../css/searchProduct.css" type="text/css" media="screen" />
<link rel="StyleSheet" href="../css/cartChange.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../css/mouseEventInform.css" type="text/css" media="screen" />

<meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
<title>JPetStore Demo</title>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<link rel="StyleSheet" href="../css/jpetstore.css" type="text/css"
          media="screen" />

<meta name="generator"
      content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
<title>JPetStore Demo</title>
<meta content="text/html; charset=windows-1252"
      http-equiv="Content-Type" />
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="Pragma" content="no-cache" />

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="../ico/favicon.png">

    <!-- Google web fonts
    ============================================ -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>

    <!-- Libs CSS
	============================================ -->
    <link rel="stylesheet" href="../css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="../js/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="../js/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="../css/themecss/lib.css" rel="stylesheet">
    <link href="../js/jquery-ui/jquery-ui.min.css" rel="stylesheet">

    <!-- Theme CSS
    ============================================ -->
    <link href="../css/themecss/so_megamenu.css" rel="stylesheet">
    <link href="../css/themecss/so-categories.css" rel="stylesheet">
    <link href="../css/themecss/so-listing-tabs.css" rel="stylesheet">

    <link id="color_scheme" href="../css/theme.css" rel="stylesheet">

    <link href="../css/responsive.css" rel="stylesheet">
</head>

<body>

<header th:fragment="header">
<div id="Header">
    <div id="wrapper" class="wrapper-full ">
        <!-- Header Container  -->
        <header id="header" class=" variantleft type_1">
            <!-- Header Top -->
            <div class="header-top">
                <div class="container">
                    <div class="row">
                        <div class="header-top-right collapsed-block text-right  col-sm-6 col-xs-12 compact-hidden">
                            <h5 class="tabBlockTitle visible-xs">More<a class="expander " href="#TabBlock-1"><i class="fa fa-angle-down"></i></a></h5>
                            <div class="tabBlock" id="TabBlock-1">
                                <ul class="top-link list-inline">
                                    <li class="account" id="my_account">
                                        <a href="#" title="My Account" class="btn btn-xs dropdown-toggle" data-toggle="dropdown"> <span >My Account</span> <span class="fa fa-angle-down"></span></a>
                                        <ul class="dropdown-menu ">
                                            <li><a href="/account/ViewNewAccount"><i class="fa fa-user"></i> Register</a></li>
                                            <li><a href="/account/viewlogin"><i class="fa fa-pencil-square-o"></i> Login</a></li>
                                        </ul>
                                    </li>
                                    <li class="wishlist"><a href="/account/viewWishList" id="wishlist-total" class="top-link-wishlist" title="Wish List"><span>Wish List</span></a></li>
                                    <li class="checkout"><a href="/order/ViewListOrder" class="top-link-checkout" title="Checkout"><span >My Order</span></a></li>
                                    <li class="cart"><a href="/cart/ViewCart" title="Shopping Cart"><span >Shopping Cart</span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //Header Top -->

            <!-- Header center -->
            <div class="header-center left">
                <div class="container">
                    <div class="row">
                        <!-- Logo -->
                        <div class="navbar-logo col-md-3 col-sm-12 col-xs-12">
                            <a href="index.html"><img src="../images/demo/logos/theme_logo.png" title="Your Store" alt="Your Store" /></a>
                        </div>
                        <!-- //end Logo -->

                        <!-- Search -->
                        <div id="sosearchpro" class="col-sm-7 search-pro">
                            <form method="post" action="/category/SearchProducts">
                                <div id="search0" class="search input-group">
                                    <div class="select_category filter_type icon-select">
                                        <select class="no-border" name="category_id">
                                            <option value="0">All Categories</option>
                                            <option value="1">All Product</option>
                                            <option value="2">All Item</option>
                                        </select>
                                    </div>
                                    <input class="autosearch-input form-control" type="text" id="keyword" size="50" autocomplete="off" placeholder="Search" name="keyword">
                                    <div class="auto hidden" id="auto">
                                        <div class="auto_out">1</div>
                                        <div class="auto_out">2</div>
                                    </div>
                                    <span class="input-group-btn">
						    <button type="submit" class="button-search btn btn-primary" name="submit_search"><i class="fa fa-search"></i></button>
						</span>
                                </div>
                                <input type="hidden" name="route" value="product/search" />
                                <script src="../js/searchProduct.js"></script>
                            </form>
                        </div>
                        <!-- //end Search -->

                        <!-- Secondary menu -->
                        <div class="col-md-2 col-sm-5 col-xs-12 shopping_cart pull-right">
                            <!--cart-->
                            <div id="cart" class=" btn-group btn-shopping-cart">
                                <a data-loading-text="Loading..." class="top_cart dropdown-toggle" data-toggle="dropdown">
                                    <div class="shopcart">
                                        <span class="handle pull-left"></span>
                                        <span class="title">My cart</span>
                                    </div>
                                </a>

                                <ul class="tab-content content dropdown-menu pull-right shoppingcart-box" role="menu">

                                    <li>
                                        <table class="table table-striped">
                                            <tbody>
                                            <tr>
                                                <td class="text-center" style="width:70px">
                                                    <a href="product.html"> <img src="../images/demo/shop/product/35.jpg" style="width:70px" alt="Filet Mign" title="Filet Mign" class="preview"> </a>
                                                </td>
                                                <td class="text-left"> <a class="cart_product_name" href="product.html">Filet Mign</a> </td>
                                                <td class="text-center"> x1 </td>
                                                <td class="text-center"> $1,202.00 </td>
                                                <td class="text-right">
                                                    <a href="product.html" class="fa fa-edit"></a>
                                                </td>
                                                <td class="text-right">
                                                    <a onclick="cart.remove('2');" class="fa fa-times fa-delete"></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-center" style="width:70px">
                                                    <a href="product.html"> <img src="../images/demo/shop/product/141.jpg" style="width:70px" alt="Canon EOS 5D" title="Canon EOS 5D" class="preview"> </a>
                                                </td>
                                                <td class="text-left"> <a class="cart_product_name" href="product.html">Canon EOS 5D</a> </td>
                                                <td class="text-center"> x1 </td>
                                                <td class="text-center"> $60.00 </td>
                                                <td class="text-right">
                                                    <a href="product.html" class="fa fa-edit"></a>
                                                </td>
                                                <td class="text-right">
                                                    <a onclick="cart.remove('1');" class="fa fa-times fa-delete"></a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </li>
                                    <li>
                                        <div>
                                            <table class="table table-bordered">
                                                <tbody>
                                                <tr>
                                                    <td class="text-left"><strong>Sub-Total</strong>
                                                    </td>
                                                    <td class="text-right">$1,060.00</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-left"><strong>Eco Tax (-2.00)</strong>
                                                    </td>
                                                    <td class="text-right">$2.00</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-left"><strong>VAT (20%)</strong>
                                                    </td>
                                                    <td class="text-right">$200.00</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-left"><strong>Total</strong>
                                                    </td>
                                                    <td class="text-right">$1,262.00</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            <p class="text-right"> <a class="btn view-cart" href="#"><i class="fa fa-shopping-cart"></i>View Cart</a>&nbsp;&nbsp;&nbsp; <a class="btn btn-mega checkout-cart" href="#"><i class="fa fa-share"></i>Checkout</a> </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!--//cart-->
                        </div>
                    </div>

                </div>
            </div>
            <!-- //Header center -->

            <!-- Header Bottom -->
            <div class="header-bottom">
                <div class="container">
                    <div class="row">

                        <div class="sidebar-menu col-md-3 col-sm-6 col-xs-12 ">
                            <div class="responsive so-megamenu ">
                                <div class="so-vertical-menu no-gutter compact-hidden">
                                    <nav class="navbar-default">

                                        <div class="container-megamenu vertical  ">

                                            <div id="menuHeading">
                                                <div class="megamenuToogle-wrapper">
                                                    <div class="megamenuToogle-pattern">
                                                        <div class="container">
                                                            <div>
                                                                <span></span>
                                                                <span></span>
                                                                <span></span>
                                                            </div>
                                                            All Categories
                                                            <i class="fa pull-right arrow-circle fa-chevron-circle-up"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="navbar-header">
                                                <button type="button" id="show-verticalmenu" data-toggle="collapse" class="navbar-toggle fa fa-list-alt">

                                                </button>
                                                All Categories
                                            </div>
                                            <div class="vertical-wrapper" >
                                                <span id="remove-verticalmenu" class="fa fa-times"></span>
                                                <div class="megamenu-pattern">
                                                    <div class="container">
                                                        <ul class="megamenu">
                                                            <li class="item-vertical style1 with-sub-menu hover" th:each="category : ${categoryList}">
                                                                <p class="close-menu"></p>
                                                                <a href="#" class="clearfix">
                                                                    <img src="../images/theme/icons/9.png" alt="icon">
                                                                    <span><th:block th:text="${category.categoryId}" /></span>
                                                                    <b class="caret"></b>
                                                                </a>
                                                                <div class="sub-menu" data-subwidth="100" >
                                                                    <div class="content" >
                                                                        <div class="row">
                                                                            <div class="col-sm-12">
                                                                                <div class="row">
                                                                                    <div class="col-md-4 static-menu">
                                                                                        <div class="menu">
                                                                                            <ul>
                                                                                                <li>
                                                                                                    <a href="#"  class="main-menu">Products</a>
                                                                                                    <ul>
                                                                                                        <li th:if = "${category.categoryId}==${product.categoryId}" th:each="product : ${productList}"><a th:href="${'/category/ViewProduct?productId='}+${product.productId}"><th:block th:text="${product.productId}" />
                                                                                                            <th:block th:utext="${product.descn}" /></a></li>
                                                                                                    </ul>
                                                                                                </li>
                                                                                            </ul>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li class="loadmore">
                                                                <i class="fa fa-plus-square-o"></i>
                                                                <span class="more-view">More Categories</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </nav>
                                </div>
                            </div>
                        </div>

                        <!-- Main menu -->
                        <div class="megamenu-hori header-bottom-right  col-md-9 col-sm-6 col-xs-12 ">
                            <div class="responsive so-megamenu ">
                                <nav class="navbar-default">
                                    <div class=" container-megamenu  horizontal">

                                        <div class="navbar-header">
                                            <button type="button" id="show-megamenu" data-toggle="collapse" class="navbar-toggle">
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </button>
                                            Navigation
                                        </div>

                                        <div class="megamenu-wrapper">
                                            <span id="remove-megamenu" class="fa fa-times"></span>
                                            <div class="megamenu-pattern">
                                                <div class="container">
                                                    <ul class="megamenu " data-transition="slide" data-animationtime="250">
                                                        <li class="home hover">
                                                            <a href="/Main/enter">Home <b class="caret"></b></a>
                                                        </li>
                                                        <li class="with-sub-menu hover">
                                                            <p class="close-menu"></p>
                                                            <a href="/account/viewlogin" class="clearfix">
                                                                <strong>Account</strong>
                                                                <span class="label"> Hot</span>
                                                                <b class="caret"></b>
                                                            </a>
                                                            <div class="sub-menu" style="width: 20%; right: auto;">
                                                                <div class="content" >
                                                                    <div class="row">
                                                                        <div class="col-md-3">
                                                                            <div class="column">
                                                                                <a href="#" class="title-submenu">AccountController</a>
                                                                                <div>
                                                                                    <ul class="row-list">
                                                                                        <li><a href="/account/viewlogin">SignOnPage </a></li>
                                                                                        <li><a href="/account/ViewNewAccount">RegisterPage</a></li>
                                                                                        <li><a href="/account/ViewEditInformationFormServlet">EditInformationPage</a></li>
                                                                                    </ul>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="with-sub-menu hover">
                                                            <p class="close-menu"></p>
                                                            <a href="#" class="clearfix">
                                                                <strong>Cart</strong>
                                                                <span class="label"> Hot</span>
                                                                <b class="caret"></b>
                                                            </a>
                                                            <div class="sub-menu" style="width: 40%; ">
                                                                <div class="content" >
                                                                    <div class="row">
                                                                        <div class="col-md-6">
                                                                            <ul class="row-list">
                                                                                <li><a class="subcategory_item" href="/cart/ViewCart">MycartPage</a></li>
                                                                                <li><a class="subcategory_item" href="/order/ViewListOrder">MyOrderPage</a></li>
                                                                                <li><a class="subcategory_item" href="/account/viewWishList">MyWishPage</a></li>
                                                                                <li><a class="subcategory_item" href="/Main/viewsendmail">Contact us</a></li>
                                                                            </ul>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <ul class="row-list">
                                                                                <li><a class="subcategory_item" href="#">About Us 1</a></li>
                                                                                <li><a class="subcategory_item" href="#">About Us 2</a></li>
                                                                                <li><a class="subcategory_item" href="#">About Us 3</a></li>
                                                                                <li><a class="subcategory_item" href="#">About Us 4</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                        </div>
                        <!-- //end Main menu -->

                    </div>
                </div>

            </div>

            <!-- Navbar switcher -->
            <!-- //end Navbar switcher -->
        </header>
</div>
</div>
</header>
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="../js/themejs/libs.js"></script>
<script type="text/javascript" src="../js/unveil/jquery.unveil.js"></script>
<script type="text/javascript" src="../js/countdown/jquery.countdown.min.js"></script>
<script type="text/javascript" src="../js/dcjqaccordion/jquery.dcjqaccordion.2.8.min.js"></script>
<script type="text/javascript" src="../js/datetimepicker/moment.js"></script>
<script type="text/javascript" src="../js/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>


<!-- Theme files
============================================ -->


<script type="text/javascript" src="../js/themejs/so_megamenu.js"></script>
<script type="text/javascript" src="../js/themejs/addtocart.js"></script>
<script type="text/javascript" src="../js/themejs/application.js"></script>
<script type="text/javascript" src="../js/themejs/cpanel.js"></script>
</body>
</html>